<h2>{{ 'DESCRIPTIONS.SETTINGS.SECURITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SECURITY.DESCRIPTION' | translate }}</p>

<div class="spinner-wr">
  <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>

<div class="security-wrapper">
  <h3>{{ 'SETTING.SECURITY.IFRAMETITLE' | translate }}</h3>

  <mat-checkbox
    card-actions
    class="security-policy-toggle"
    color="primary"
    ngDefaultControl
    (change)="iframeEnabledChanged($event)"
    [(ngModel)]="iframeEnabled"
    [disabled]="(['iam.policy.write'] | hasRole | async) === false"
  >
    {{ 'SETTING.SECURITY.IFRAMEENABLED' | translate }}
  </mat-checkbox>
  <cnsl-info-section [type]="InfoSectionType.ALERT">{{
    'SETTING.SECURITY.IFRAMEDESCRIPTION' | translate
  }}</cnsl-info-section>

  <form class="security-allowed-originsform" (ngSubmit)="add(redInput)">
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'SETTING.SECURITY.ALLOWEDORIGINS' | translate }}</cnsl-label>

      <input #redInput cnslInput placeholder="ex. https://" [formControl]="originsControl" />
    </cnsl-form-field>
    <button
      matTooltip="{{ 'ACTIONS.ADD' | translate }}"
      type="submit"
      mat-icon-button
      [disabled]="!iframeEnabled || originsControl.invalid || (['iam.policy.write'] | hasRole | async) === false"
    >
      <mat-icon>add</mat-icon>
    </button>
  </form>

  <div class="security-allowed-uris-list">
    <div *ngFor="let uri of originsList" class="uri-line" [ngClass]="{ disabled: !iframeEnabled }">
      <span class="uri">{{ uri }}</span>
      <span class="fill-space"></span>

      <button matTooltip="{{ 'ACTIONS.DELETE' | translate }}" mat-icon-button (click)="remove(uri)" class="icon-button">
        <mat-icon class="icon">cancel</mat-icon>
      </button>
    </div>
  </div>

  <h3>{{ 'SETTING.SECURITY.IMPERSONATIONTITLE' | translate }}</h3>
  <mat-checkbox
    card-actions
    class="security-policy-toggle"
    color="primary"
    ngDefaultControl
    [(ngModel)]="impersonationEnabled"
    [disabled]="(['iam.policy.write'] | hasRole | async) === false"
  >
    {{ 'SETTING.SECURITY.IMPERSONATIONENABLED' | translate }}
  </mat-checkbox>
  <cnsl-info-section [type]="InfoSectionType.INFO">{{
    'SETTING.SECURITY.IMPERSONATIONDESCRIPTION' | translate
  }}</cnsl-info-section>
</div>

<div class="general-btn-container">
  <button
    class="save-button"
    (click)="savePolicy()"
    color="primary"
    type="submit"
    mat-raised-button
    [disabled]="(['iam.policy.write'] | hasRole | async) === false"
  >
    {{ 'ACTIONS.SAVE' | translate }}
  </button>
</div>
